<template>
  <div class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">个人简历</h3>
        <div class="box-tools pull-right">
          <el-button type="success" class="btn btn-success" v-if='isEditable' @click="()=>addVisible = true">
            <i class='fa fa-plus-square-o'>添加简历</i>
          </el-button>
        </div>
      </div>
      <div class="box-body">
        <section class="content" id="departEmployees">
          <div class="row">
            <el-table stripe :default-sort="{prop: 'startTime', order: 'descending'}" :empty-text="emptyText" :row-key='id' :highlight-current-row='true' :data="editResumes" border style="width: 100%">
              <el-table-column type='index' label="序号" :width='80'></el-table-column>
              <el-table-column v-for='col in this.columns' :fixed='col.fixed?col.fixed:false' :key="col.prop" :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
              <el-table-column label="操作" width="320">
                <template scope="scope">
                  <el-button type="success" @click="view(scope.$index,scope.row)">
                    <i class="fa fa-eye">查看</i>
                  </el-button>
                  <el-button type="primary" v-if="userEditable" @click="editRow(scope.$index,scope.row)">
                    <i class="fa fa-edit">编辑</i>
                  </el-button>
                  <el-button type="warning" v-if="userEditable" @click="deleteresume(scope.$index,scope.row)">
                    <i class="fa fa-trash">删除</i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </section>
      </div>
      <el-dialog title='用户简历' :v-if="viewVisible" :before-close="()=>viewVisible = false" :visible.sync="viewVisible" :modal="false" size="small">
        <Resume v-if='viewVisible' :editable='false' ref='resView' :resume='editResume'></Resume>
        <span slot="footer" class="dialog-footer">
          <el-button @click="viewVisible = false">关 闭</el-button>
        </span>
      </el-dialog>

      <el-dialog title="编辑用户简历" v-if="editVisible" :visible.sync="editVisible" :before-close="()=>editVisible = false" :modal="false" size="small">
        <Resume v-if='editVisible' :editable='true' ref='resEditView' :resume='editResume'></Resume>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">关 闭</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="新增简历" v-if="addVisible" :visible.sync="addVisible" :before-close="()=>addVisible = false" :modal="false" size="small">
        <Resume v-if='addVisible' :editable='true' ref='addView'></Resume>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false">关 闭</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import MyDatePicker from "../../mycomponents/common/MyDatePicker";
import Resume from "../../mycomponents/common/Resume";
import Utils from "../../../common/utils";
let util = new Utils();
export default {
  name: "Resumes",
  props: ["resumes", "editable"],
  components: {
    MyDatePicker,
    Resume
  },
  data: function() {
    return {
      util:util,
      editVisible: false,
      viewVisible: false,
      addVisible:false,
      emptyText: "空",
      id: "id",
      userEditable:true,
      editResumes: [],
      isEditable: true,
      editResume: {
        startTime: "",
        leftTime: "",
        company: "",
        title: ""
      },
      columns: [
        {
          prop: "startTime",
          label: "开始时间",
          sortable: true,
          width: "160",
          formatter: util.dateFormater
        },
        {
          prop: "leftTime",
          label: "结束时间",
          sortable: true,
          width: "160",
          formatter: util.dateFormater
        },
        {
          prop: "company",
          label: "工作单位(就读学校)",
          width: "310",
          sortable: true,
          formatter: util.stringFormater
        },
        {
          prop: "title",
          label: "职位(专业)信息",
          width: "230",
          sortable: true,
          formatter: util.stringFormater
        }
      ]
    };
  },
  created() {
    if (this.resumes) {
      this.editResumes = this.resumes;
    }
    if(this.editable != null){
      this.isEditable = this.editable
    }
    this.userEditable = this.isEditable && util.hasRole(1)
  },
  mounted() {
    if (this.editable != null) {
      this.isEditable = this.editable;
    }
  },
  methods: {
    getData() {
      return this.editResumes;
    },
    editRow(index,row){
      console.log("edit resume:" + JSON.stringify(row));
      this.editResume = row
      this.editVisible =true
    },
    view(index,row) {
      console.log("view resume:" + JSON.stringify(row));
      this.editResume = row
      this.viewVisible =true
    },
    // getRes(index) {
    //   console.log("select index:" + index);
    //   this.editResume = this.editResumes[index]
    // },
    deleteresume(index,row) {
      var that = this
      util.deleteConf(that,()=>{
          console.log("delete resume");
          that.editResumes.splice(index, 1);
      })
    },
    clearEditData() {
      this.editResume.startTime = "";
      this.editResume.leftTime = "";
      this.editResume.company = "";
      this.editResume.title = "";
    },
    deepCopy(o, c) {
      var c = c || {};
      for (var i in o) {
        if (typeof o[i] === "object") {
          if (o[i].constructor === Array) {
            c[i] = [];
          } else {
            c[i] = {};
          }
          this.deepCopy(o[i], c[i]);
        } else {
          c[i] = o[i];
        }
      }
      return c;
    },
    add(){
      var newresume = {};
      let newResume = this.$refs.addView.getResume();
      if(newResume){
        this.deepCopy(newResume, newresume);
        this.editResumes.push(newresume)
        this.addVisible = false
      }
      else{
        console.log("add resume failed for invalid resume")
      }
    },
    update(){
      this.editResume = this.$refs.resEditView.getResume();
      console.log("view resume:" + JSON.stringify(this.editResumes));
      this.editVisible = false
    }
  }
};
</script>

<style scoped>

</style>

